<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<!-- 搜索框 -->
		<view class="input-view flex row aCenter">
			<input class="flex-1" v-model="searchText" placeholder="请输入搜索内容"
				type="text" confirm-type="search"
				
				@blur="onBlur"
			/>
			<image src="../../static/search.png" @click="onSearch"></image>
		</view>
		<text class="search-info">搜索出<text>{{count}}</text>条商品信息</text>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" top="220rpx">
			<view class="item-view flex row aCenter" v-for="(item_goods,index) in dataList" :key="index">
				<image class="item-menu-image" :src="item_goods.goods_image" mode=""></image>
				<view class="item-right-box flex-1">
					<text class="right-title-text">{{item_goods.goods_name}}</text>
					<text class="right-price">¥{{item_goods.shop_price}}</text>
					<view class="number-view flex row">
						<!-- 规格为空 并且数量大于0 显示步进器 -->
						<view v-if="(!(item_goods.goods_spec && item_goods.goods_spec.length > 0) && item_goods.num)" class="number-s-view flex row aCenter" @click.stop="">
							<view class="number-left flex center" @click.stop="updataGoodsNum({
																		type: 'reduce',
																		id: item_goods.id,
																		eventId: 'goods'+item_goods.id,
																		event: $event,
																		num: item_goods.num,
																		goods_image: item_goods.goods_image,
																	}, item_goods)">
								<image class="number-icon" src="../../static/jian_w.png"></image>
							</view>
							<input type="number" class="input-number" v-model="item_goods.num" disabled="false"/>
							<view class="number-right flex center" @click.stop="updataGoodsNum({
																		type: 'add',
																		id: item_goods.id,
																		eventId: 'goods'+item_goods.id,
																		event: $event,
																		num: item_goods.num,
																		goods_image: item_goods.goods_image,
																	}, item_goods)">
								<image class="number-icon" src="../../static/add_w.png"></image>
							</view>
						</view>
						
						<!-- 规格不为空，表示有规格，显示选择规格的按钮，隐藏+号按钮 -->
						<view v-if="(item_goods.goods_spec && item_goods.goods_spec.length > 0)" 
							class="number-gg-view flex row center" @click.stop="openSpecs(item_goods)">
							<view v-if="(item_goods.num)" class="number-gg-view-round flex center">{{item_goods.num}}</view>
							<text class="number-gg-view-title">选规格</text>
						</view>
						
						<!-- 规格为空，并且数量==0 -->
						<image v-if="!(item_goods.num) && !(item_goods.goods_spec && item_goods.goods_spec.length > 0)" 
							class="right-add-icon" src="../../static/add_round.png" 
							@click.stop="updataGoodsNum({
								type: 'add',
								id: item_goods.id,
								eventId: 'goods'+item_goods.id,
								event: $event,
								num: item_goods.num,
								goods_image: item_goods.goods_image,
							}, item_goods)"></image>
					</view>
				</view>
			</view>
		</mescroll-uni>
		
		<!-- pop 规格选择 -->
		<!-- pop 规格选择 -->
		<!-- pop 规格选择 -->
		<uni-popup ref="popupSpecs" type="bottom">
			<view class="popup-view flex">
				<view class="specs-title-view flex center">
					<text class="specs-title-view-title">请选择规格</text>
				</view>
				<view class="specs-goodsname-view flex row aCenter">
					<image class="specs-goodsname-icon" :src="currentItem.goods_image"></image>
					<text class="specs-goodsname">{{ currentItem.goods_name }}</text>
				</view>
				<text class="specs-title-view-title specs-title-mar">请选择规格</text>
				<!-- 规格列表 -->
				<view class="specs-view flex row wrap">
					<view 
						v-for="(item,index) in currentSpecsList" :key="'specs' + index"
						:class="[item.active ? 'specs-item-active': 'specs-item','flex center']"
						@click.stop="setSpecs(item)"
					>
						<text :class="[item.active ? 'specs-title-active': 'specs-title']">{{item.name}}</text>
					</view>
				</view>
				<!-- 操作按钮 增删商品 -->
				<view class="edit-spces-bom flex row aCenter">
					<view class="number-view flex row aCenter">
						
						<!-- =========================== 数量编辑 规格 =========================== -->
						<!-- =========================== 数量编辑 规格 =========================== -->
						<!-- =========================== 数量编辑 规格 =========================== -->
						<view class="number-s-view flex row aCenter" @click.stop="">
							<view class="number-left flex center" @click.stop="updataGoodsNum({
																		type: 'reduce',
																		id: currentItem.id,
																		eventId: 'curr'+currentItem.id,
																		event: $event,
																		num: currentItem.num,
																		goods_image: currentItem.goods_image,
																		spec_num: specItem.num,
																		spec_name: specItem.name,
																	}, currentItem, specItem)">
								<image class="number-icon" src="../../static/jian_w.png"></image>
							</view>
							<input type="number" class="input-number" v-model="specItem.num" disabled="false"/>
							<view class="number-right flex center" @click.stop="updataGoodsNum({
																		type: 'add',
																		id: currentItem.id,
																		eventId: 'curr'+currentItem.id,
																		event: $event,
																		num: currentItem.num,
																		goods_image: currentItem.goods_image,
																		spec_num: specItem.num,
																		spec_name: specItem.name,
																	}, currentItem, specItem)">
								<image class="number-icon" src="../../static/add_w.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				searchText: '',
				count: 0,
				
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [],
				
				currentItem: {},
				currentSpecsList: [],
				specItem: {},
				
				invite_code: '',
			}
		},
		onLoad() {
			this.invite_code = uni.getStorageSync("invite_code");	
		},
		methods: {
			onBlur () {
				// 输入框失焦， 
				console.log('输入框失焦');
				this.onSearch();
			},
			onSearch () {
				this._timeSearch && clearTimeout(this._timeSearch);
				this._timeSearch = setTimeout(()=>{
					this.mescroll.resetUpScroll();
				}, 100);
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					search: this.searchText
				}
				console.log(params);
				this.$request("api/index/goods_search", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						if(code == 1){
							this.count = data.count;
							if(page.num == 1){
								this.dataList = data.goods;
							}else{
								this.dataList = this.dataList.concat(data.goods);
							}
							this.mescroll.endSuccess(data.goods.length);
						}else{
							this.mescroll.endErr()
						}
					}).catch((e) => {
						uni.hideToast();
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
			
			// 更新商品数量
			updataGoodsNum (opt, item, specItem) {
				if(!this.invite_code){
					// console.log("没有桌位号，不可以操作数量");
					uni.showToast({
						title: '线上菜单仅供浏览',
						icon: 'none',
					})
					return;
				}
				
				let {
					type,        // 类型  add=添加 reduce=减少
					id,          // id 商品的id
					event,       // 增加商品必传，当前组件的上下文 $event
					num = 0,         // 商品数量
					goods_image = "", // 商品图片
					spec_num = 0,    // 商品规格数量
					spec_name = "",   // 商品规格名称
				} = {...opt};
				
				console.log('数量更新 opt=', opt);
				
				if(type == 'add'){
					if(spec_name){
						opt.spec_num = opt.spec_num + 1;
						specItem.num = opt.spec_num;
					}else{
						opt.num = opt.num + 1;
						item.num = opt.num;
					}
					this._goodsNumAdd({...opt});
				}else if(type == 'reduce'){
					if(spec_name){
						opt.spec_num = opt.spec_num > 1 ? opt.spec_num - 1 : 0;
						specItem.num = opt.spec_num;
					}else{
						opt.num = opt.num > 1 ? opt.num - 1 : 0;
						item.num = opt.num;
					}
					this._goodsReduce(opt);
				}else{
					console.log('updataGoodsNum 方法，type 参数错误！type=', type);
				}
			},
			//内部 添加商品
			_goodsNumAdd (opt) {
				//如果是添加商品，显示动画。
				if(opt.event){
					if(opt.goods_image.indexOf('http') != -1){
						this.addToCart(opt.event, opt.eventId, opt.goods_image);
					}else{
						this.addToCart(opt.event, opt.eventId, 'https://rabbit.jiujingwulian.com' + opt.goods_image);
					}
				}
				this._numberUpdata(opt);
			},
			//内部 减少商品
			_goodsReduce (opt) {
				this._numberUpdata(opt);
			},
			
			//调用数据更新
			_numberUpdata (opt) {
				let that = this;
				// 去重
				this._numberTime && clearTimeout(this._numberTime);
				this._numberTime = setTimeout(() => {
					that.updataCartNumber(opt);
				}, 321);
			},
			
			/**
			 * 购物车商品数量操作 接口
			 */
			updataCartNumber (opt) {
				let {
					type,        // 类型  add=添加 reduce=减少
					id = 0,          // id 商品的id
					event,       // 增加商品必传，当前组件的上下文 $event
					num = 0,         // 商品数量
					spec_num = 0,    // 商品规格数量
					spec_name = "",   // 商品规格名称
				} = {...opt};
				
				uni.showToast({ title: "请稍后...", icon: 'loading', mask: true, duration: 10000 });
				
				// api/Cart/add_cart 加入购物车
				let params = {
					token: uni.getStorageSync("token"),
					goods_id: id,
					num: spec_name ? spec_num : num, //传入商品数量，传几后台就存几，传0 购物车移除此商品
					spec_name: spec_name, //规格名称
				}
				console.log(params);
				this.$request("api/Cart/add_cart", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							//加入餐车成功，刷新列表
							
							this.onSearch();
						}else{
							uni.hideToast();
							uni.showToast({ title: msg, icon: 'none'});
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
			
			//执行加入餐车动画
			addToCart(e, id, img){
				// this.$refs.inCart.addToCart(e, id, img);
			},
			
			/**
			 * 展示商品 规格 规格选择 弹窗
			 * 当点击带规格的商品弹出选择规格弹窗 并处理相关数据
			 */
			openSpecs(obj){
				console.log( '选中的规格 商品总信息=' ,obj);
				if(obj.goods_spec && obj.goods_spec.length > 0){
					// 当商品存在规格 赋值给当前选中的商品 准备加入餐车的商品
					if(this.currentItem && (obj.id == this.currentItem.id)){
						// 当前选择的和上次选择的一样，不做任何操作，新数据num可以进行修改。
						let _goodsSpec = obj.goods_spec;
						let _specItem = {};
						_goodsSpec.map((item, index)=>{
							if(index === 0){
								item.active = true;
								_specItem = item;
								console.log('初始化 _specItem=', _specItem);
							}else{
								item.active = false;
							}
						});
						// 更新规格选择的数据
						this.updataSpce(obj, _goodsSpec, _specItem);
					}else{
						// 当前选择的和上次选择的不一样，直接重新赋值
						// 默认选中第一个
						let _goodsSpec = obj.goods_spec;
						let _specItem = {};
						_goodsSpec.map((item, index)=>{
							if(index === 0){
								item.active = true;
								_specItem = item;
								console.log('初始化2 _specItem=', _specItem);
							}else{
								item.active = false;
							}
						});
						// 更新规格选择的数据
						this.updataSpce(obj, _goodsSpec, _specItem);
					}
					// 打开弹窗
					this.$refs.popupSpecs.open('bottom')
				}else{
					uni.showToast({
						title: '当前商品没有规格！', icon: 'error'
					})
				}
			},
			
			//更新规格选择的数据
			updataSpce (goods, specList, specItem) {
				this.currentItem = goods;
				this.currentSpecsList = specList;
				this.specItem = specItem;
			},
			
			/**
			 * 规格设置部分逻辑
			 * 选择当前商品的规格
			 */
			setSpecs(obj){
				let _list = [...this.currentSpecsList];
				let _specItem = this.specItem;
				_list.map((item, index)=>{
					if(item.id == obj.id){
						console.log('已经把', item.name, '设置为选中。');
						item.active = true;
						_specItem = item;
					}else{
						item.active = false;
					}
				});
				
				// 渲染选择后的数据
				this.updataSpce(this.currentItem, _list, _specItem);
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #010B24;
	}
	.input-view {
		width: 700rpx;
		height: 76rpx;
		background-color: #FFF;
		border-radius: 38rpx;
		margin-left: 25rpx;
		padding: 0 36rpx;
		input {
			font-size: 26rpx;
			color: #121212;
		}
		image {
			width: 34rpx;
			height: 34rpx;
			margin-left: 12rpx;
		}
	}
	.search-info {
		font-size: 26rpx;
		color: #FFF;
		margin: 12rpx 0 12rpx 30rpx;
		text {
			font-size: 28rpx;
			color: #FE3737;
			font-weight: bold;
		}
	}
	.item-view {
		padding: 10rpx 36rpx 10rpx 36rpx;
	}
	.item-menu-image {
		width: 202rpx;
		height: 190rpx;
		background-color: #272F45;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.item-right-box {
		height: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.right-title-text {
		height: 80rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 10rpx;
		overflow: hidden;
	}
	.right-price {
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
	}
	.number-view {
		width: 100%;
		height: 60rpx;
		justify-content: flex-end;
		align-items: center;
	}
	.number-s-view {
		width: 230rpx;
		height: 50rpx;
		border: 1rpx solid #45516E;
		border-radius: 10rpx;
	}
	.input-number {
		flex: 1;
		font-size: 26rpx;
		color: #FFF;
		text-align: center;
	}
	.number-left {
		width: 70rpx;
		height: 100%;
		border-right: 1rpx solid #45516E;
	}
	.number-right {
		width: 70rpx;
		height: 100%;
		border-left: 1rpx solid #45516E;
	}
	.number-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.right-add-icon {
		width: 39rpx;
		height: 39rpx;
	}
	.number-gg-view {
		padding: 2rpx 12rpx;
		position: relative;
		border-radius: 20rpx;
		background-color: #FFF;
	}
	.number-gg-view-round {
		position: absolute;
		width: 34rpx;
		height: 34rpx;
		top: -10rpx;
		right: -18rpx;
		border-radius: 20rpx;
		background-color: #FF0000;
		font-size: 24rpx;
		color: #FFF;
	}
	.number-gg-view-title {
		font-size: 24rpx;
		color: #010B24;
	}
	
	
	
	
	
	
	
	
	// ===== popup -- popup -- popup -- popup =====
	.popup-view {
		width: 100%;
		min-height: 300rpx;
		// overflow: auto;
		// -webkit-overflow-scrolling:touch;
		background-color: #FFF;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
	}
	.bottom-view {
		height: 120rpx;
		background-color: #010B24;
		padding: 0 30rpx;
	}
	.pop-bottom-view {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.cart-view {
		width: 120rpx;
		height: 120rpx;
		position: relative;
	}
	.cart-icon {
		width: 78rpx;
		height: 78rpx;
	}
	.cart-number {
		position: absolute;
		right: 6rpx;
		top: 9rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx;
		background-color: #E42435;
		font-size: 24rpx;
		line-height: 1;
		text-align: center;
		color: #FFF;
	}
	.bottom-price {
		font-size: 32rpx;
		color: #FFF;
		font-weight: bold;
	}
	.bottom-btn {
		width: 250rpx;
		height: 87rpx;
		background-color: #B053FF;
		border-radius: 45rpx;
		font-size: 32rpx;
		color: #FFF;
	}
	.bottom-btn:active {
		background-color: #B053FFEE;
	}
	.number-gg-view {
		padding: 2rpx 12rpx;
		position: relative;
		border-radius: 20rpx;
		background-color: #FFF;
	}
	.number-gg-view-round {
		position: absolute;
		width: 34rpx;
		height: 34rpx;
		top: -10rpx;
		right: -18rpx;
		border-radius: 20rpx;
		background-color: #FF0000;
		font-size: 24rpx;
		color: #FFF;
	}
	.number-gg-view-title {
		font-size: 24rpx;
		color: #010B24;
	}
	.delete-icon {
		width: 27rpx;
		height: 27rpx;
	}
	.cart-pop-view {
		width: 100%;
		height: 90rpx;
		padding: 0 32rpx;
		position: fixed;
		z-index: 9;
		top: 0;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	.delete-text {
		font-size: 26rpx;
		color: #7D7D7D;
		margin-left: 12rpx;
	}
	.cart-content {
		margin-top: 90rpx;
		margin-bottom: 120rpx;
	}
	.cart-content-sv {
		min-height: 200rpx;
		max-height: 1000rpx;
	}
	.cart-item {
		width: 100%;
		padding: 26rpx 41rpx;
	}
	.cart-item-right {
		margin-left: 22rpx;
	}
	.cart-item-title {
		height: 60rpx;
		font-size: 28rpx;
		color: #212121;
		line-height: 30rpx;
		overflow: hidden;
	}
	.cart-item-price {
		font-size: 28rpx;
		color: #212121;
		font-weight: bold;
		margin-top: 10rpx;
	}
	.cart-btm {
		justify-content: space-between;
	}
	.cart-spec-title {
		font-size: 24rpx;
		color: #787878;
	}
	// .cart-item-title::after {
	// 	content: "【常温】";
	// 	font-size: 28rpx;
	// 	color: #787878;
	// 	font-weight: 400;
	// 	overflow: hidden;
	// }
	.number-cart-box {
		height: 100rpx;
	}
	.cart-item-icon {
		width: 202rpx;
		height: 190rpx;
	}
	.cart-number-view {
		width: 230rpx;
		height: 50rpx;
		border: 1rpx solid #45516E33;
		border-radius: 10rpx;
	}
	.cart-input-number {
		flex: 1;
		font-size: 26rpx;
		color: #121212;
		text-align: center;
	}
	.cart-number-left {
		width: 70rpx;
		height: 100%;
		border-right: 1rpx solid #45516E33;
	}
	.cart-number-right {
		width: 70rpx;
		height: 100%;
		border-left: 1rpx solid #45516E33;
	}
	.cart-number-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.swiper {
		width: 700rpx;
		height: 500rpx;
		margin-left: 25rpx;
		margin-top: 30rpx;
	}
	.swiper-title {
		font-size: 30rpx;
		color: #212121;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 26rpx;
	}
	.swiper-price {
		font-size: 34rpx;
		color: #E42435;
		font-weight: bold;
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.specs-view {
		width: 100%;
		padding: 12rpx 36rpx;
		margin-bottom: 20rpx;
	}
	.specs-item {
		padding: 14rpx 45rpx;
		background-color: #F0F0F0;
		border-radius: 40rpx;
		margin-right: 26rpx;
	}
	.specs-title {
		font-size: 26rpx;
		color: #1B1B1B;
	}
	.specs-item-active {
		padding: 14rpx 45rpx;
		background-color: #B053FF;
		border-radius: 40rpx;
		margin-right: 26rpx;
	}
	.specs-title-active {
		font-size: 26rpx;
		color: #FFFFFF;
	}
	.specs-title-view {
		width: 100%;
		height: 80rpx;
	}
	.specs-title-view-title {
		font-size: 28rpx;
		color: #121212;
		font-weight: bold;
	}
	.specs-goodsname-view {
		width: 100%;
		padding: 12rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 12rpx;
	}
	.specs-goodsname {
		flex: 1;
		font-size: 26rpx;
		color: #121212;
		margin-left: 12rpx;
	}
	.specs-goodsname-icon {
		width: 110rpx;
		height: 110rpx;
		border-radius: 16rpx;
		background-color: #F0F0F0;
	}
	.specs-title-mar {
		margin-left: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 12rpx;
	}
	.edit-spces-bom {
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		padding: 0 36rpx;
	}
</style>
